<template>
	<view class="mypop">
		<u-popup :show="showPop" mode="center" height="300px" customStyle="width:90%" :round="10">
			<view class="p-3">
				<view class=""style='position: absolute;right: 40rpx;z-index: 10;'>
					<u-icon name="close"  size="20"  @click="refuse"></u-icon>
				</view>
				<view class="title" style="text-align: center;color: black;">
					{{title}}
				</view>
				<scroll-view scroll-y="false" style="height: 200rpx;">
					<view class="" style="margin-top: 15px;color: #979797;display: flex;">
						为完善登录功能我们需要获取您个人的手机号码,我们将不会泄露您个人的手机号码,请您授权获取!
					</view>
				</scroll-view>
				<view class="f-row jc-c">
					<view style="width: 60%;">
						<u-button class="custom-style" text="获取手机号码" openType="getPhoneNumber"
						@getphonenumber="getPhoneNumber"
							customStyle="background: linear-gradient(90deg, #0873DE 0%, #C7EACE 100%);color:#fff;margin-top:20px;border-radius: 30px;"
							>
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getWxPhone
	} from '@/request/api.js'
	export default {
		props: ['showPop', 'title', 'tip'],
		data() {
			return {
				show: false,
				value: ''
			}
		},
		methods: {
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			submit(e) {
				this.$emit('submit',this.value)
				this.value = ''
			},
			refuse() {
				this.$emit('refuse', true)
			},
			getPhoneNumber(e) {
				// console.log(e.detail.code)
				getWxPhone({
					code: e.detail.code,
					type:0
				}).then(res => {
					this.$emit('submit')
				})
			}
		}
	}
</script>

<style>
	::v-deep .u-icon{
		display: inline !important;
	}
	.mypop {
		width: 90%;
	}
</style>
